<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
    function showContent(task, url) {
        var target = document.getElementById("middle");
        var taskName = document.getElementById("breadcrumbs");
        
 
        var ajax = new XMLHttpRequest();
        ajax.open('GET', url, true);
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4) {
                target.innerHTML = ajax.responseText;
                taskName.innerHTML = task;               
            }
        }
        ajax.send(null);
    }

	function updateNominate(fieldToUpdate, purpose) {
		var target = document.getElementById("fieldToUpdate");

        var ajax = new XMLHttpRequest();
        if(purpose == "remove")
        	ajax.open('GET', "nominateEmployees.php"+"?function="+purpose+"&target="+fieldToUpdate, true);
        else if(purpose == "add") {
            if(target == "update1stNominate") {
            	var value = document.getElementById("1stNominate").value;        
        		ajax.open('GET', "nominateEmployees.php"+"?function="+purpose+"&target="+fieldToUpdate+"&name="+value, true);
            }
            else  if(target == "update2ndNominate") {
            	var value = document.getElementById("2ndNominate").value;        
        		ajax.open('GET', "nominateEmployees.php"+"?function="+purpose+"&target="+fieldToUpdate+"&name="+value, true);
            }
        }
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4) {
                target.innerHTML = ajax.responseText;             
            }
        }
        ajax.send(null);
    }

	function detectChange() {
		var target = document.getElementById("response");
		var personnel = document.getElementById("personel").value;
		
		var ajax = new XMLHttpRequest();
		 ajax.open('GET', "viewFlexStatus.php?function=viewCurrentFlexHours&personel="+personnel, true);
	        ajax.onreadystatechange = function() {
	            if(ajax.readyState == 4) {
	                target.innerHTML = ajax.responseText;           
	            }
	        }
	        ajax.send(null);
	}

    function showTable() {
        var target = document.getElementById("formTable");
 
        var ajax = new XMLHttpRequest();
        ajax.open('GET', 'viewFlexStatus.php?function=viewFlexDetails', true);
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4) {
                target.innerHTML = ajax.responseText;           
            }
        }
        ajax.send(null);
    }

    function submitForm(purpose) {
        var target = document.getElementById("middle");
 
        var ajax = new XMLHttpRequest();
        ajax.open('GET', 'workHoursRegistration.php?function='+purpose, true);
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4) {
                target.innerHTML = ajax.responseText;           
            }
        }
        ajax.send(null);
    }
</script>

<title>Work Hour Registration</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="all">
  <div id="header">
    <div id="claim">
      <h1> Happy Life Pte Ltd </h1>
    </div>
  </div>
  <div id="breadcrumbs">Home</div>
  <div id="content" >
    <div id="divider">
      <div id="left">
        <div id="main_nav">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li class="open"><a href="#">Record Work Hours</a>
              <ul>
                <li><a href="javascript: void();" onclick="showContent('Record Work Hours > For Card Access', 'cardRegistration.php')">For Card Access</a></li>
                <li><a href="javascript: void();" onclick="showContent('Record Work Hours > For Special Reason', 'specialReasonRegistration.php')">For Special Reason</a></li>
              </ul>
            </li>
            <li><a href="javascript: void();" onclick="showContent('Nominate Employees', 'nominateEmployees.html')">Nominate Employees</a></li>
            <li class="open"><a href="#">Flex-Status Hours</a>
				<ul>
					<li><a href="javascript: void();" onclick="showContent('Flex-Status Hours > View Current Hours', 'viewCurrentFlex.html')">View Current Hours</a></li>
					<li><a href="javascript: void();" onclick="showContent('Flex-Status Hours > View Details', 'viewFlexDetails.php')">View Details</a></li>
				</ul>
			</li>            
          </ul>
        </div>
      </div>
      <div id="middle">
        <div class="text">
          <h1>Welcome</h1>
          <p>Welcome to Happily Life insurance company's Work-hour Registration application.</p>
         </div>
        <div class="text_2col">
          <div class="left_col">
            <h2>Record Works Hours</h2>
            <p>Have you forgotten to scan your card access? Here is the option for you to record work hours manually for yourself and your collegue. You are also able to record other activites that should be counted into your flex-hour status (eg. Participation in external courses, vacation, leave due to birth, illness...) You will also be able to input other hours that are to be excluded out of the flex-status hours (eg. Participation in leisure activies during company hours.</p>
          </div>
          <div class="right_col">
            <h2>Nominate Employees</h2>
            <p> Worry about what if you will be gone from the company for a long time, how can you access the application. Do not worry, this function will provide you the capability for you to assign up to 2 other employees to help you maintain your flex-hours status. </p>
          </div>
        </div>
        <div class="text_2col">
            <div class="left_col">
                <h2>View Flex-Status Hours</h2>
                <p>This where you can view your current view status to see if you have being working too much hours or you have been working too little hours.</p>
        	</div>
        	<div class="right_col">
        		<h2>View Flex-Status Details</h2>
            	<p>This where you can view all the details of what the system has been tracking to see if your flex-status hours have been calcuated correctly.</p>
            </div>
      
      
      </div>
      </div>
      	  <div id="right">
      	  	<p class="login">Login</p>
      	  </div>	
    
    <div id="footer">
      <div id="footer_line"></div>
      <div id="foot_left">&nbsp;</div>
      <div id="foot_mid">Developed by Tan Zhang</div>
      <div id="foot_right">&nbsp;</div>
    </div>
 
</div>
</div>
</div>
</body>
</html>
